<script lang='ts' setup>
import { ref, watch } from "vue"
import AutoCharge from "./AutoCharge.vue";
import { useRouter } from "vue-router";

const open = ref<boolean>(false);
const open2 = ref<boolean>(false);
const open4 = ref<boolean>(false);
const handleOk4 = () => {
    open4.value = false;
};

const router = useRouter()

const handleOk2 = () => {
    open2.value = false;

    if (domainList.value.length >= limit.value) {
        router.push({ path: "/cart/confirmOrder" })
    }
};

const handleOk = () => {
    emit("close")
};

const open3 = ref<boolean>(false);
const handleOk3 = () => {
    open3.value = false;
    domainList.value.push({ name: tmp.value, modify: false })
};

const tmp = ref<string>("")
const limit = ref<number>(3)


const add = (domain: string) => {
    if (domainList.value.length >= limit.value) {
        tmp.value = domain;
        open3.value = true
    } else
        domainList.value.push({ name: domain, modify: false })
}


const changeAutoRecharge = (record: any) => {
    record.autoRecharge = !record.autoRecharge
}

const dataSource2 = ref([
    {
        key: "1",
        no: 1,
        name: "后台",
        cycle: 32,
        status: "正常",
        purchaseDate: "2022-02-24",
        autoRecharge: false
    }, {
        key: "2",
        no: 2,
        name: "充值域名",
        cycle: 32,
        status: "即将过期",
        purchaseDate: "2022-02-24",
        autoRecharge: false
    }, {
        key: "3",
        no: 3,
        name: "统计域名",
        cycle: 32,
        status: "已过期",
        purchaseDate: "2022-02-24",
        autoRecharge: true
    },
    {
        key: "3",
        no: 3,
        name: "API",
        cycle: 32,
        status: "已过期",
        purchaseDate: "2022-02-24",
        autoRecharge: true
    },
    {
        key: "3",
        no: 3,
        name: "代理",
        cycle: 32,
        status: "已过期",
        purchaseDate: "2022-02-24",
        autoRecharge: true
    },
    {
        key: "4",
        no: 4,
        name: "下发服务",
        cycle: 32,
        status: "已过期",
        purchaseDate: "2022-02-24",
        autoRecharge: true
    },
]);

const columns = ref([
    {
        title: "服务编号",
        dataIndex: "no",
        key: "no",
    },
    {
        title: "服务名称",
        dataIndex: "name",
        key: "name",
    },
    {
        title: "服务周期",
        dataIndex: "cycle",
        key: "cycle",
    },
    {
        title: "购买时间",
        dataIndex: "purchaseDate",
        key: "purchaseDate",
    },
    {
        title: "状态",
        dataIndex: "status",
        key: "status",
    },
    {
        title: "操作",
        dataIndex: "operation",
        key: "operation",
    },
    {
        title: "自动续费",
        dataIndex: "autoRecharge",
        key: "autoRecharge",
    },
]);


const domain = ref<string>("")

// type domainType = {
//     name: string,
//     modify: boolean
// }
const domainList = ref([
    {
        name: "http://www.baidu.com",
        modify: false
    }
])
const serviceList = ref([
    {
        name: "6ad996a65229e1adfbce624d0add584b",
        modify: false
    }
])



const props = defineProps(['showSubSoft'])

watch(() => props.showSubSoft, (newVal) => {
    open.value = newVal
})

const emit = defineEmits(['close'])

// const test = ref([
//     {
//         name: 'a'
//     },
//     {
//         name: 'b'
//     }
// ])

</script>
<template>
    <a-modal v-model:open="open" title="附属软件" @ok="handleOk" width="1500px" @cancel="emit('close')">
        <a-table :scroll="{ x: 1000, }" :dataSource="dataSource2" :columns="columns">
            <template #bodyCell="{ column, record }">
                <template v-if="column.key === 'operation'">
                    <div class="flex">
                        <a-button type="primary" class="mr-5" @click="">续费</a-button>
                        <a-button type="primary" class="mr-5" @click="open2 = true"
                            v-if="record.name !== '下发服务'">域名管理</a-button>
                        <a-button type="primary" v-else class="mr-5" @click="open4 = true">服务管理</a-button>
                    </div>
                </template>
                <AutoCharge :record="record" v-if="column.key === 'autoRecharge'"
                    @change-auto-recharge="changeAutoRecharge(record)" />
            </template>
        </a-table>
    </a-modal>


    <!-- 域名管理弹出框 -->
    <a-modal v-model:open="open2" @ok="handleOk2">
        <div class="pt-8">
            <p>
                当前拥有授权域名：<span class="text-red-500">{{ limit }}</span>
            </p>
            <p v-for="(item, index) in domainList" class="flex" :key="index + 'domainList'">
                <a-input v-model:value="item.name" :disabled="!item.modify" />
                <a-button type="primary" class="mr-5 ml-5" danger @click="domainList.splice(index, 1)">删除</a-button>
                <a-button type="primary" @click="item.modify = !item.modify">{{ item.modify ? '保存' : '修改' }}</a-button>
            </p>
            <p class="flex relative">
                <a-input v-model:value="domain" class="pr-20" />
                <a-button type="primary" class="absolute right-0" @click="add(domain)">添加</a-button>
            </p>
        </div>
    </a-modal>

    <a-modal v-model:open="open3" @ok="handleOk3">
        <div class="pt-8">
            可能产生额外的授权服务费用是否添加
        </div>
    </a-modal>

    <!-- 服务管理弹出框 -->
    <a-modal v-model:open="open4" @ok="handleOk4">
        <div class="pt-8">
            <p v-for="(item, index) in serviceList" class="flex" :key="index + 'domainList'">
                <a-input v-model:value="item.name" :disabled="!item.modify" />
                <a-button type="primary" class="mr-5 ml-5" danger @click="serviceList.splice(index, 1)">删除</a-button>
            </p>
            <p class="flex relative">
                <a-input v-model:value="domain" class="pr-20" />
                <a-button type="primary" class="absolute right-0"
                    @click="serviceList.push({ name: domain, modify: false })">添加</a-button>
            </p>
        </div>
    </a-modal>

</template>
<style lang='scss' scoped></style>